<template>
    <div class="content">

        <el-tabs type="border-card" v-model="ns" @tab-click="handleNsChange">
            <el-tab-pane v-for="(item, index) in nss" :key="index" :label="item" :name="item" lazy>
                <el-row>
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="数据源" prop="ds">
                            <!--数据源-->
                            <el-select v-model="ds" placeholder="请选择数据源" @change="handleDsChange">
                                <el-option v-for="(item,index) in dss" :key="index" :label="item.ds + ' | ' + item.dbName" :value="item.ds" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="名称空间">
                            <el-input v-model="mns" placeholder="Mapper-Namespace"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                            <el-button type="primary" icon="el-icon-refresh-right" @click="handleClear">重置</el-button>
                            <el-button type="primary" icon="el-icon-circle-plus" @click="addOrUpdateHandle(ns,ds)">新增</el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="handleBatchDel()">批量删除</el-button>
                            <el-button type="primary" icon="el-icon-copy-document" @click="clickClone(ns,'MNS')">克隆</el-button>
                        </el-form-item>
                    </el-form>
                </el-row>
                <el-table ref="multipleTable" :data="pageData.list" border fit highlight-current-row :header-row-style="() => {return 'line-height:20px';} "
                    :header-cell-style="{background: 'rgb(55, 60, 100)',color: '#FFFFFF', textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="40"> </el-table-column>
                    <el-table-column fixed prop="ds" label="数据源"></el-table-column>
                    <el-table-column fixed prop="mns" label="名称空间"></el-table-column>
                    <el-table-column prop="xml" label="mapper.xml" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleMapperSql({ds:scope.row.ds,mns:scope.row.mns,xml:scope.row.xml})">{{scope.row.mns + 'Mapper.xml'}} </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-delete" @click="handleDel(scope.row.mns)" size="small">删除</el-button>
                            <el-button type="text" icon="el-icon-search" @click="hanldeChangeView('/mapper/sql', {ns: scope.row.ns,ds: scope.row.ds,mns:scope.row.mns })" size="small">SQL语句</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageData.currPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageData.totalCount">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
        <el-drawer :title="xmlFrom.title" :visible.sync="dialog" direction="rtl" size="60%" custom-class="demo-drawer" ref="drawer">
            <div class="demo-drawer__content">
                <el-form :model="xmlFrom" label-width="0px">
                    <el-form-item>
                        <el-input :value="xmlFrom.xml" type="textarea" autosize="{ minRows: 1 maxRows: 100}" style="background-color:#DCDFE6;font-weight:bold;color:blue;">
                            <xmp align="left">{{ xmlFrom.xml }}</xmp>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
        <!-- 弹窗, 新增 / 修改 -->
        <!-- 通过@refreshDataList自定义事件给新增和编辑组件传递函数调用 -->
        <add-mapper v-if="visible" ref="addMapper" @refreshDataList="getPageList"></add-mapper>
        <clone v-if="cloneOpen" ref="cloneRef" @refreshDataList="refreshDataList"></clone>
    </div>
</template>
<script>
    import { mapperPage, mapperDel } from '../../api/mapper'
    import { nsList } from '../../api/ns'
    import { dsClone, dsList } from '../../api/ds';
    import { nsData, dsCloneData } from '../../mixins/mixin'
    import AddMapper from './AddMapper.vue';
    import Clone from '../ds/Clone.vue';
    export default {
        mounted() {
            if (this.$route.query) {
                this.ns = this.$route.query.ns !== undefined && this.$route.query.ns !== '' ? this.$route.query.ns : 'public';
                this.ds = this.$route.query.ds;
            }
            this.getNsList()
            this.getDsList()
        },
        components: {
            AddMapper,
            Clone
        },
        mixins: [nsData, dsCloneData],
        data() {
            return {
                visible: false,
                dialog: false,
                dss: [],
                ds: '',
                mns: '',
                xmlFrom: {
                    title: '',
                    xml: ''
                }
            }
        },
        methods: {
            refreshDataList() {
                this.cloneOpen = false
                this.visible = false
                this.getPageList();
            },
            addOrUpdateHandle(ns, ds) {
                this.visible = true
                this.$nextTick(() => {
                    this.$refs.addMapper.init(ns, ds)
                })
            },
            handleNsChange() {
                this.ds = ''
                this.dss = []
                this.getDsList()
            },
            handleDsChange() {
                this.getPageList()
            },
            handleSelectionChange(selection) {
                this.multipleSelection = selection.map(item => item.mns);
                this.multipleCloneInfo = selection.map(item => { return { ds: item.ds, mns: item.mns } });
            },
            handleBatchDel() {
                if (this.multipleSelection.length === 0) {
                    this.$message({
                        type: 'info',
                        message: '请选择需要删除的数据'
                    })
                } else {
                    this.$confirm('确认要删除吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        mapperDel(this.ns, this.ds, this.multipleSelection).then((res) => {
                            this.$message({ message: '删除成功！', type: 'success' })
                            this.getPageList()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        })
                    })
                }
            },
            handleClear() {
                this.mns = ''
                this.getPageList()
            },
            getDsList() {
                dsList(this.ns).then(res => {
                    this.dss = res.data;
                    if (this.ds === null || this.ds === '' || this.ds === undefined) {
                        this.ds = this.dss.length === 0 ? '' : this.dss[0].ds
                    }
                }).then(res => {
                    this.getPageList()
                })
            },
            getPageList() {
                mapperPage(this.ns, this.ds, this.mns, this.page.page, this.page.limit).then((res) => {
                    this.pageData = res.data
                })
            },
            handleMapperSql(selection) {
                this.dialog = true
                this.xmlFrom = {}
                this.xmlFrom.title = selection.mns + 'Mapper.xml'
                this.xmlFrom.xml = selection.xml
            }
        }
    }
</script>

<style scoped>
.content {
    margin: 20px 0px;
}
.el-table {
    margin: 20px 0px;
}
.el-row {
    margin-bottom: 20px;
    line-height: 10px;
}
.selection-button {
    margin-top: 20px;
    left: 0%;
}
</style>
